<template lang="pug">
.GridBox(:class="{'overflow-hidden': overflowHidden}")
  div(:class="gridHeight")
    .gridHeadDisPlay(v-if="!isNeedHead")
    .rows-1.gridHead(v-if="isNeedHead")
      slot(name="title")
        span.iconfont(:class="iconTitle" v-if="title")
          span {{title}}
      slot(name="menuList")
        span.gridMenu(v-if="isNeedMenu")
          span.iconfont.icon-shuaxin(@click="refreshBody")
        span.gridMenu(v-if="routerLink")
          router-link.iconfont.icon-more.color-dfe6ec(:to="routerLink")
    div(:class="gridBodyClass")
      slot
    div(v-if="isLoading")
      Loading(title="努力加载中...")
</template>
<script>
/**
 * @name GridBox 组件
 * @author 林墁霓 <linmn@gddit.com>
 * @description 通过配置row高度，设置栅格盒子
 */
import Loading from '@/components/Loading'
export default {
  name: 'GridBox',
  components: {
    Loading
  },
  props: {
    isLoading: {
      type: Boolean,
      default: false
    },
    overflowHidden: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    }, // gridbox 标题
    icon: {
      type: String,
      default: ''
    }, // gridbox 标题图标
    routerLink: {
      type: String,
      default: ''
    }, // gridbox 链接跳转
    isNeedHead: {
      type: Boolean,
      default: true
    },
    isNeedMenu: {
      type: Boolean,
      default: true
    }, // 是否需要操作按钮列
    rowNum: {
      type: Number,
      default: 1
    }, // gridbox需要的行数，行高默认40px，margin-bottom: 20px
    funcProps: {
      type: Object,
      default: () => ({})
    }, // 其他组件传给按钮的参数，供按钮事件执行时调用
    func: Function // 按钮事件，按钮点击或其他方式触发时执行
  },
  computed: {
    gridBodyClass () {
      return `rows-${this.rowNum - 1}`
    }
  },
  data () {
    return {
      gridHeight: `rows-${this.rowNum}`,
      iconTitle: `icon-${this.icon}`
    }
  },
  methods: {
    refreshBody ({funcProps}) {
      this.func({
        funcProps: {
          button: this,
          ...this.funcProps
        }
      })
    }
  }
}
</script>
<style lang='sass' scoped>
.overflow-hidden
  overflow: hidden
.GridBox
  /* display: flex */
  /*overflow: hidden*/
  padding: 0 20px
  margin-bottom: 20px
  .gridHeadDisPlay
    height: 15px
  .gridHead
    display: flex
    justify-content: space-between
    padding: 0
    line-height: 60px
    /* margin: 5px 0 */
    font-size: 17px
    .iconfont
      color: #03a9f4
      span
        color: #333
        font-weight: 600
        margin-left: 6px
  .gridMenu
    display: flex
    justify-content: space-between
    .iconfont
      color: #666
      cursor: pointer
      &>a
        color: #666
        margin-left: 6px
    .iconfont:hover
      color: #03a9f4
      &>a
        color: #03a9f4
    .iconfont:not(:last-child)
      padding-right: 15px

</style>
